<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="Asciidoctor 2.0.23">
<meta name="description" content="GUIX Studio provides management of all UI resources the application will use for colors, fonts, pixel-maps, and strings. The sections that follow describe how to add, modify, and delete resources within your UI screen design.">
<title>Chapter 4: GUIX Studio Resources</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic%7CNoto+Serif:400,400italic,700,700italic%7CDroid+Sans+Mono:400,700">
<style>
/*! Asciidoctor default stylesheet | MIT License | https://asciidoctor.org */
/* Uncomment the following line when using as a custom stylesheet */
/* @import "https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic%7CNoto+Serif:400,400italic,700,700italic%7CDroid+Sans+Mono:400,700"; */
html{font-family:sans-serif;-webkit-text-size-adjust:100%}
a{background:none}
a:focus{outline:thin dotted}
a:active,a:hover{outline:0}
h1{font-size:2em;margin:.67em 0}
b,strong{font-weight:bold}
abbr{font-size:.9em}
abbr[title]{cursor:help;border-bottom:1px dotted #dddddf;text-decoration:none}
dfn{font-style:italic}
hr{height:0}
mark{background:#ff0;color:#000}
code,kbd,pre,samp{font-family:monospace;font-size:1em}
pre{white-space:pre-wrap}
q{quotes:"\201C" "\201D" "\2018" "\2019"}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-.5em}
sub{bottom:-.25em}
img{border:0}
svg:not(:root){overflow:hidden}
figure{margin:0}
audio,video{display:inline-block}
audio:not([controls]){display:none;height:0}
fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}
legend{border:0;padding:0}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}
button,input{line-height:normal}
button,select{text-transform:none}
button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}
button[disabled],html input[disabled]{cursor:default}
input[type=checkbox],input[type=radio]{padding:0}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
textarea{overflow:auto;vertical-align:top}
table{border-collapse:collapse;border-spacing:0}
*,::before,::after{box-sizing:border-box}
html,body{font-size:100%}
body{background:#fff;color:rgba(0,0,0,.8);padding:0;margin:0;font-family:"Noto Serif","DejaVu Serif",serif;line-height:1;position:relative;cursor:auto;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-wrap:anywhere;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}
a:hover{cursor:pointer}
img,object,embed{max-width:100%;height:auto}
object,embed{height:100%}
img{-ms-interpolation-mode:bicubic}
.left{float:left!important}
.right{float:right!important}
.text-left{text-align:left!important}
.text-right{text-align:right!important}
.text-center{text-align:center!important}
.text-justify{text-align:justify!important}
.hide{display:none}
img,object,svg{display:inline-block;vertical-align:middle}
textarea{height:auto;min-height:50px}
select{width:100%}
.subheader,.admonitionblock td.content>.title,.audioblock>.title,.exampleblock>.title,.imageblock>.title,.listingblock>.title,.literalblock>.title,.stemblock>.title,.openblock>.title,.paragraph>.title,.quoteblock>.title,table.tableblock>.title,.verseblock>.title,.videoblock>.title,.dlist>.title,.olist>.title,.ulist>.title,.qlist>.title,.hdlist>.title{line-height:1.45;color:#7a2518;font-weight:400;margin-top:0;margin-bottom:.25em}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6,pre,form,p,blockquote,th,td{margin:0;padding:0}
a{color:#2156a5;text-decoration:underline;line-height:inherit}
a:hover,a:focus{color:#1d4b8f}
a img{border:0}
p{line-height:1.6;margin-bottom:1.25em;text-rendering:optimizeLegibility}
p aside{font-size:.875em;line-height:1.35;font-style:italic}
h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{font-family:"Open Sans","DejaVu Sans",sans-serif;font-weight:300;font-style:normal;color:#ba3925;text-rendering:optimizeLegibility;margin-top:1em;margin-bottom:.5em;line-height:1.0125em}
h1 small,h2 small,h3 small,#toctitle small,.sidebarblock>.content>.title small,h4 small,h5 small,h6 small{font-size:60%;color:#e99b8f;line-height:0}
h1{font-size:2.125em}
h2{font-size:1.6875em}
h3,#toctitle,.sidebarblock>.content>.title{font-size:1.375em}
h4,h5{font-size:1.125em}
h6{font-size:1em}
hr{border:solid #dddddf;border-width:1px 0 0;clear:both;margin:1.25em 0 1.1875em}
em,i{font-style:italic;line-height:inherit}
strong,b{font-weight:bold;line-height:inherit}
small{font-size:60%;line-height:inherit}
code{font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;font-weight:400;color:rgba(0,0,0,.9)}
ul,ol,dl{line-height:1.6;margin-bottom:1.25em;list-style-position:outside;font-family:inherit}
ul,ol{margin-left:1.5em}
ul li ul,ul li ol{margin-left:1.25em;margin-bottom:0}
ul.circle{list-style-type:circle}
ul.disc{list-style-type:disc}
ul.square{list-style-type:square}
ul.circle ul:not([class]),ul.disc ul:not([class]),ul.square ul:not([class]){list-style:inherit}
ol li ul,ol li ol{margin-left:1.25em;margin-bottom:0}
dl dt{margin-bottom:.3125em;font-weight:bold}
dl dd{margin-bottom:1.25em}
blockquote{margin:0 0 1.25em;padding:.5625em 1.25em 0 1.1875em;border-left:1px solid #ddd}
blockquote,blockquote p{line-height:1.6;color:rgba(0,0,0,.85)}
@media screen and (min-width:768px){h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{line-height:1.2}
h1{font-size:2.75em}
h2{font-size:2.3125em}
h3,#toctitle,.sidebarblock>.content>.title{font-size:1.6875em}
h4{font-size:1.4375em}}
table{background:#fff;margin-bottom:1.25em;border:1px solid #dedede;word-wrap:normal}
table thead,table tfoot{background:#f7f8f7}
table thead tr th,table thead tr td,table tfoot tr th,table tfoot tr td{padding:.5em .625em .625em;font-size:inherit;color:rgba(0,0,0,.8);text-align:left}
table tr th,table tr td{padding:.5625em .625em;font-size:inherit;color:rgba(0,0,0,.8)}
table tr.even,table tr.alt{background:#f8f8f7}
table thead tr th,table tfoot tr th,table tbody tr td,table tr td,table tfoot tr td{line-height:1.6}
h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{line-height:1.2;word-spacing:-.05em}
h1 strong,h2 strong,h3 strong,#toctitle strong,.sidebarblock>.content>.title strong,h4 strong,h5 strong,h6 strong{font-weight:400}
.center{margin-left:auto;margin-right:auto}
.stretch{width:100%}
.clearfix::before,.clearfix::after,.float-group::before,.float-group::after{content:" ";display:table}
.clearfix::after,.float-group::after{clear:both}
:not(pre).nobreak{word-wrap:normal}
:not(pre).nowrap{white-space:nowrap}
:not(pre).pre-wrap{white-space:pre-wrap}
:not(pre):not([class^=L])>code{font-size:.9375em;font-style:normal!important;letter-spacing:0;padding:.1em .5ex;word-spacing:-.15em;background:#f7f7f8;border-radius:4px;line-height:1.45;text-rendering:optimizeSpeed}
pre{color:rgba(0,0,0,.9);font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;line-height:1.45;text-rendering:optimizeSpeed}
pre code,pre pre{color:inherit;font-size:inherit;line-height:inherit}
pre>code{display:block}
pre.nowrap,pre.nowrap pre{white-space:pre;word-wrap:normal}
em em{font-style:normal}
strong strong{font-weight:400}
.keyseq{color:rgba(51,51,51,.8)}
kbd{font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;display:inline-block;color:rgba(0,0,0,.8);font-size:.65em;line-height:1.45;background:#f7f7f7;border:1px solid #ccc;border-radius:3px;box-shadow:0 1px 0 rgba(0,0,0,.2),inset 0 0 0 .1em #fff;margin:0 .15em;padding:.2em .5em;vertical-align:middle;position:relative;top:-.1em;white-space:nowrap}
.keyseq kbd:first-child{margin-left:0}
.keyseq kbd:last-child{margin-right:0}
.menuseq,.menuref{color:#000}
.menuseq b:not(.caret),.menuref{font-weight:inherit}
.menuseq{word-spacing:-.02em}
.menuseq b.caret{font-size:1.25em;line-height:.8}
.menuseq i.caret{font-weight:bold;text-align:center;width:.45em}
b.button::before,b.button::after{position:relative;top:-1px;font-weight:400}
b.button::before{content:"[";padding:0 3px 0 2px}
b.button::after{content:"]";padding:0 2px 0 3px}
p a>code:hover{color:rgba(0,0,0,.9)}
#header,#content,#footnotes,#footer{width:100%;margin:0 auto;max-width:62.5em;*zoom:1;position:relative;padding-left:.9375em;padding-right:.9375em}
#header::before,#header::after,#content::before,#content::after,#footnotes::before,#footnotes::after,#footer::before,#footer::after{content:" ";display:table}
#header::after,#content::after,#footnotes::after,#footer::after{clear:both}
#content{margin-top:1.25em}
#content::before{content:none}
#header>h1:first-child{color:rgba(0,0,0,.85);margin-top:2.25rem;margin-bottom:0}
#header>h1:first-child+#toc{margin-top:8px;border-top:1px solid #dddddf}
#header>h1:only-child{border-bottom:1px solid #dddddf;padding-bottom:8px}
#header .details{border-bottom:1px solid #dddddf;line-height:1.45;padding-top:.25em;padding-bottom:.25em;padding-left:.25em;color:rgba(0,0,0,.6);display:flex;flex-flow:row wrap}
#header .details span:first-child{margin-left:-.125em}
#header .details span.email a{color:rgba(0,0,0,.85)}
#header .details br{display:none}
#header .details br+span::before{content:"\00a0\2013\00a0"}
#header .details br+span.author::before{content:"\00a0\22c5\00a0";color:rgba(0,0,0,.85)}
#header .details br+span#revremark::before{content:"\00a0|\00a0"}
#header #revnumber{text-transform:capitalize}
#header #revnumber::after{content:"\00a0"}
#content>h1:first-child:not([class]){color:rgba(0,0,0,.85);border-bottom:1px solid #dddddf;padding-bottom:8px;margin-top:0;padding-top:1rem;margin-bottom:1.25rem}
#toc{border-bottom:1px solid #e7e7e9;padding-bottom:.5em}
#toc>ul{margin-left:.125em}
#toc ul.sectlevel0>li>a{font-style:italic}
#toc ul.sectlevel0 ul.sectlevel1{margin:.5em 0}
#toc ul{font-family:"Open Sans","DejaVu Sans",sans-serif;list-style-type:none}
#toc li{line-height:1.3334;margin-top:.3334em}
#toc a{text-decoration:none}
#toc a:active{text-decoration:underline}
#toctitle{color:#7a2518;font-size:1.2em}
@media screen and (min-width:768px){#toctitle{font-size:1.375em}
body.toc2{padding-left:15em;padding-right:0}
body.toc2 #header>h1:nth-last-child(2){border-bottom:1px solid #dddddf;padding-bottom:8px}
#toc.toc2{margin-top:0!important;background:#f8f8f7;position:fixed;width:15em;left:0;top:0;border-right:1px solid #e7e7e9;border-top-width:0!important;border-bottom-width:0!important;z-index:1000;padding:1.25em 1em;height:100%;overflow:auto}
#toc.toc2 #toctitle{margin-top:0;margin-bottom:.8rem;font-size:1.2em}
#toc.toc2>ul{font-size:.9em;margin-bottom:0}
#toc.toc2 ul ul{margin-left:0;padding-left:1em}
#toc.toc2 ul.sectlevel0 ul.sectlevel1{padding-left:0;margin-top:.5em;margin-bottom:.5em}
body.toc2.toc-right{padding-left:0;padding-right:15em}
body.toc2.toc-right #toc.toc2{border-right-width:0;border-left:1px solid #e7e7e9;left:auto;right:0}}
@media screen and (min-width:1280px){body.toc2{padding-left:20em;padding-right:0}
#toc.toc2{width:20em}
#toc.toc2 #toctitle{font-size:1.375em}
#toc.toc2>ul{font-size:.95em}
#toc.toc2 ul ul{padding-left:1.25em}
body.toc2.toc-right{padding-left:0;padding-right:20em}}
#content #toc{border:1px solid #e0e0dc;margin-bottom:1.25em;padding:1.25em;background:#f8f8f7;border-radius:4px}
#content #toc>:first-child{margin-top:0}
#content #toc>:last-child{margin-bottom:0}
#footer{max-width:none;background:rgba(0,0,0,.8);padding:1.25em}
#footer-text{color:hsla(0,0%,100%,.8);line-height:1.44}
#content{margin-bottom:.625em}
.sect1{padding-bottom:.625em}
@media screen and (min-width:768px){#content{margin-bottom:1.25em}
.sect1{padding-bottom:1.25em}}
.sect1:last-child{padding-bottom:0}
.sect1+.sect1{border-top:1px solid #e7e7e9}
#content h1>a.anchor,h2>a.anchor,h3>a.anchor,#toctitle>a.anchor,.sidebarblock>.content>.title>a.anchor,h4>a.anchor,h5>a.anchor,h6>a.anchor{position:absolute;z-index:1001;width:1.5ex;margin-left:-1.5ex;display:block;text-decoration:none!important;visibility:hidden;text-align:center;font-weight:400}
#content h1>a.anchor::before,h2>a.anchor::before,h3>a.anchor::before,#toctitle>a.anchor::before,.sidebarblock>.content>.title>a.anchor::before,h4>a.anchor::before,h5>a.anchor::before,h6>a.anchor::before{content:"\00A7";font-size:.85em;display:block;padding-top:.1em}
#content h1:hover>a.anchor,#content h1>a.anchor:hover,h2:hover>a.anchor,h2>a.anchor:hover,h3:hover>a.anchor,#toctitle:hover>a.anchor,.sidebarblock>.content>.title:hover>a.anchor,h3>a.anchor:hover,#toctitle>a.anchor:hover,.sidebarblock>.content>.title>a.anchor:hover,h4:hover>a.anchor,h4>a.anchor:hover,h5:hover>a.anchor,h5>a.anchor:hover,h6:hover>a.anchor,h6>a.anchor:hover{visibility:visible}
#content h1>a.link,h2>a.link,h3>a.link,#toctitle>a.link,.sidebarblock>.content>.title>a.link,h4>a.link,h5>a.link,h6>a.link{color:#ba3925;text-decoration:none}
#content h1>a.link:hover,h2>a.link:hover,h3>a.link:hover,#toctitle>a.link:hover,.sidebarblock>.content>.title>a.link:hover,h4>a.link:hover,h5>a.link:hover,h6>a.link:hover{color:#a53221}
details,.audioblock,.imageblock,.literalblock,.listingblock,.stemblock,.videoblock{margin-bottom:1.25em}
details{margin-left:1.25rem}
details>summary{cursor:pointer;display:block;position:relative;line-height:1.6;margin-bottom:.625rem;outline:none;-webkit-tap-highlight-color:transparent}
details>summary::-webkit-details-marker{display:none}
details>summary::before{content:"";border:solid transparent;border-left:solid;border-width:.3em 0 .3em .5em;position:absolute;top:.5em;left:-1.25rem;transform:translateX(15%)}
details[open]>summary::before{border:solid transparent;border-top:solid;border-width:.5em .3em 0;transform:translateY(15%)}
details>summary::after{content:"";width:1.25rem;height:1em;position:absolute;top:.3em;left:-1.25rem}
.admonitionblock td.content>.title,.audioblock>.title,.exampleblock>.title,.imageblock>.title,.listingblock>.title,.literalblock>.title,.stemblock>.title,.openblock>.title,.paragraph>.title,.quoteblock>.title,table.tableblock>.title,.verseblock>.title,.videoblock>.title,.dlist>.title,.olist>.title,.ulist>.title,.qlist>.title,.hdlist>.title{text-rendering:optimizeLegibility;text-align:left;font-family:"Noto Serif","DejaVu Serif",serif;font-size:1rem;font-style:italic}
table.tableblock.fit-content>caption.title{white-space:nowrap;width:0}
.paragraph.lead>p,#preamble>.sectionbody>[class=paragraph]:first-of-type p{font-size:1.21875em;line-height:1.6;color:rgba(0,0,0,.85)}
.admonitionblock>table{border-collapse:separate;border:0;background:none;width:100%}
.admonitionblock>table td.icon{text-align:center;width:80px}
.admonitionblock>table td.icon img{max-width:none}
.admonitionblock>table td.icon .title{font-weight:bold;font-family:"Open Sans","DejaVu Sans",sans-serif;text-transform:uppercase}
.admonitionblock>table td.content{padding-left:1.125em;padding-right:1.25em;border-left:1px solid #dddddf;color:rgba(0,0,0,.6);word-wrap:anywhere}
.admonitionblock>table td.content>:last-child>:last-child{margin-bottom:0}
.exampleblock>.content{border:1px solid #e6e6e6;margin-bottom:1.25em;padding:1.25em;background:#fff;border-radius:4px}
.sidebarblock{border:1px solid #dbdbd6;margin-bottom:1.25em;padding:1.25em;background:#f3f3f2;border-radius:4px}
.sidebarblock>.content>.title{color:#7a2518;margin-top:0;text-align:center}
.exampleblock>.content>:first-child,.sidebarblock>.content>:first-child{margin-top:0}
.exampleblock>.content>:last-child,.exampleblock>.content>:last-child>:last-child,.exampleblock>.content .olist>ol>li:last-child>:last-child,.exampleblock>.content .ulist>ul>li:last-child>:last-child,.exampleblock>.content .qlist>ol>li:last-child>:last-child,.sidebarblock>.content>:last-child,.sidebarblock>.content>:last-child>:last-child,.sidebarblock>.content .olist>ol>li:last-child>:last-child,.sidebarblock>.content .ulist>ul>li:last-child>:last-child,.sidebarblock>.content .qlist>ol>li:last-child>:last-child{margin-bottom:0}
.literalblock pre,.listingblock>.content>pre{border-radius:4px;overflow-x:auto;padding:1em;font-size:.8125em}
@media screen and (min-width:768px){.literalblock pre,.listingblock>.content>pre{font-size:.90625em}}
@media screen and (min-width:1280px){.literalblock pre,.listingblock>.content>pre{font-size:1em}}
.literalblock pre,.listingblock>.content>pre:not(.highlight),.listingblock>.content>pre[class=highlight],.listingblock>.content>pre[class^="highlight "]{background:#f7f7f8}
.literalblock.output pre{color:#f7f7f8;background:rgba(0,0,0,.9)}
.listingblock>.content{position:relative}
.listingblock code[data-lang]::before{display:none;content:attr(data-lang);position:absolute;font-size:.75em;top:.425rem;right:.5rem;line-height:1;text-transform:uppercase;color:inherit;opacity:.5}
.listingblock:hover code[data-lang]::before{display:block}
.listingblock.terminal pre .command::before{content:attr(data-prompt);padding-right:.5em;color:inherit;opacity:.5}
.listingblock.terminal pre .command:not([data-prompt])::before{content:"$"}
.listingblock pre.highlightjs{padding:0}
.listingblock pre.highlightjs>code{padding:1em;border-radius:4px}
.listingblock pre.prettyprint{border-width:0}
.prettyprint{background:#f7f7f8}
pre.prettyprint .linenums{line-height:1.45;margin-left:2em}
pre.prettyprint li{background:none;list-style-type:inherit;padding-left:0}
pre.prettyprint li code[data-lang]::before{opacity:1}
pre.prettyprint li:not(:first-child) code[data-lang]::before{display:none}
table.linenotable{border-collapse:separate;border:0;margin-bottom:0;background:none}
table.linenotable td[class]{color:inherit;vertical-align:top;padding:0;line-height:inherit;white-space:normal}
table.linenotable td.code{padding-left:.75em}
table.linenotable td.linenos,pre.pygments .linenos{border-right:1px solid;opacity:.35;padding-right:.5em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
pre.pygments span.linenos{display:inline-block;margin-right:.75em}
.quoteblock{margin:0 1em 1.25em 1.5em;display:table}
.quoteblock:not(.excerpt)>.title{margin-left:-1.5em;margin-bottom:.75em}
.quoteblock blockquote,.quoteblock p{color:rgba(0,0,0,.85);font-size:1.15rem;line-height:1.75;word-spacing:.1em;letter-spacing:0;font-style:italic;text-align:justify}
.quoteblock blockquote{margin:0;padding:0;border:0}
.quoteblock blockquote::before{content:"\201c";float:left;font-size:2.75em;font-weight:bold;line-height:.6em;margin-left:-.6em;color:#7a2518;text-shadow:0 1px 2px rgba(0,0,0,.1)}
.quoteblock blockquote>.paragraph:last-child p{margin-bottom:0}
.quoteblock .attribution{margin-top:.75em;margin-right:.5ex;text-align:right}
.verseblock{margin:0 1em 1.25em}
.verseblock pre{font-family:"Open Sans","DejaVu Sans",sans-serif;font-size:1.15rem;color:rgba(0,0,0,.85);font-weight:300;text-rendering:optimizeLegibility}
.verseblock pre strong{font-weight:400}
.verseblock .attribution{margin-top:1.25rem;margin-left:.5ex}
.quoteblock .attribution,.verseblock .attribution{font-size:.9375em;line-height:1.45;font-style:italic}
.quoteblock .attribution br,.verseblock .attribution br{display:none}
.quoteblock .attribution cite,.verseblock .attribution cite{display:block;letter-spacing:-.025em;color:rgba(0,0,0,.6)}
.quoteblock.abstract blockquote::before,.quoteblock.excerpt blockquote::before,.quoteblock .quoteblock blockquote::before{display:none}
.quoteblock.abstract blockquote,.quoteblock.abstract p,.quoteblock.excerpt blockquote,.quoteblock.excerpt p,.quoteblock .quoteblock blockquote,.quoteblock .quoteblock p{line-height:1.6;word-spacing:0}
.quoteblock.abstract{margin:0 1em 1.25em;display:block}
.quoteblock.abstract>.title{margin:0 0 .375em;font-size:1.15em;text-align:center}
.quoteblock.excerpt>blockquote,.quoteblock .quoteblock{padding:0 0 .25em 1em;border-left:.25em solid #dddddf}
.quoteblock.excerpt,.quoteblock .quoteblock{margin-left:0}
.quoteblock.excerpt blockquote,.quoteblock.excerpt p,.quoteblock .quoteblock blockquote,.quoteblock .quoteblock p{color:inherit;font-size:1.0625rem}
.quoteblock.excerpt .attribution,.quoteblock .quoteblock .attribution{color:inherit;font-size:.85rem;text-align:left;margin-right:0}
p.tableblock:last-child{margin-bottom:0}
td.tableblock>.content{margin-bottom:1.25em;word-wrap:anywhere}
td.tableblock>.content>:last-child{margin-bottom:-1.25em}
table.tableblock,th.tableblock,td.tableblock{border:0 solid #dedede}
table.grid-all>*>tr>*{border-width:1px}
table.grid-cols>*>tr>*{border-width:0 1px}
table.grid-rows>*>tr>*{border-width:1px 0}
table.frame-all{border-width:1px}
table.frame-ends{border-width:1px 0}
table.frame-sides{border-width:0 1px}
table.frame-none>colgroup+*>:first-child>*,table.frame-sides>colgroup+*>:first-child>*{border-top-width:0}
table.frame-none>:last-child>:last-child>*,table.frame-sides>:last-child>:last-child>*{border-bottom-width:0}
table.frame-none>*>tr>:first-child,table.frame-ends>*>tr>:first-child{border-left-width:0}
table.frame-none>*>tr>:last-child,table.frame-ends>*>tr>:last-child{border-right-width:0}
table.stripes-all>*>tr,table.stripes-odd>*>tr:nth-of-type(odd),table.stripes-even>*>tr:nth-of-type(even),table.stripes-hover>*>tr:hover{background:#f8f8f7}
th.halign-left,td.halign-left{text-align:left}
th.halign-right,td.halign-right{text-align:right}
th.halign-center,td.halign-center{text-align:center}
th.valign-top,td.valign-top{vertical-align:top}
th.valign-bottom,td.valign-bottom{vertical-align:bottom}
th.valign-middle,td.valign-middle{vertical-align:middle}
table thead th,table tfoot th{font-weight:bold}
tbody tr th{background:#f7f8f7}
tbody tr th,tbody tr th p,tfoot tr th,tfoot tr th p{color:rgba(0,0,0,.8);font-weight:bold}
p.tableblock>code:only-child{background:none;padding:0}
p.tableblock{font-size:1em}
ol{margin-left:1.75em}
ul li ol{margin-left:1.5em}
dl dd{margin-left:1.125em}
dl dd:last-child,dl dd:last-child>:last-child{margin-bottom:0}
li p,ul dd,ol dd,.olist .olist,.ulist .ulist,.ulist .olist,.olist .ulist{margin-bottom:.625em}
ul.checklist,ul.none,ol.none,ul.no-bullet,ol.no-bullet,ol.unnumbered,ul.unstyled,ol.unstyled{list-style-type:none}
ul.no-bullet,ol.no-bullet,ol.unnumbered{margin-left:.625em}
ul.unstyled,ol.unstyled{margin-left:0}
li>p:empty:only-child::before{content:"";display:inline-block}
ul.checklist>li>p:first-child{margin-left:-1em}
ul.checklist>li>p:first-child>.fa-square-o:first-child,ul.checklist>li>p:first-child>.fa-check-square-o:first-child{width:1.25em;font-size:.8em;position:relative;bottom:.125em}
ul.checklist>li>p:first-child>input[type=checkbox]:first-child{margin-right:.25em}
ul.inline{display:flex;flex-flow:row wrap;list-style:none;margin:0 0 .625em -1.25em}
ul.inline>li{margin-left:1.25em}
.unstyled dl dt{font-weight:400;font-style:normal}
ol.arabic{list-style-type:decimal}
ol.decimal{list-style-type:decimal-leading-zero}
ol.loweralpha{list-style-type:lower-alpha}
ol.upperalpha{list-style-type:upper-alpha}
ol.lowerroman{list-style-type:lower-roman}
ol.upperroman{list-style-type:upper-roman}
ol.lowergreek{list-style-type:lower-greek}
.hdlist>table,.colist>table{border:0;background:none}
.hdlist>table>tbody>tr,.colist>table>tbody>tr{background:none}
td.hdlist1,td.hdlist2{vertical-align:top;padding:0 .625em}
td.hdlist1{font-weight:bold;padding-bottom:1.25em}
td.hdlist2{word-wrap:anywhere}
.literalblock+.colist,.listingblock+.colist{margin-top:-.5em}
.colist td:not([class]):first-child{padding:.4em .75em 0;line-height:1;vertical-align:top}
.colist td:not([class]):first-child img{max-width:none}
.colist td:not([class]):last-child{padding:.25em 0}
.thumb,.th{line-height:0;display:inline-block;border:4px solid #fff;box-shadow:0 0 0 1px #ddd}
.imageblock.left{margin:.25em .625em 1.25em 0}
.imageblock.right{margin:.25em 0 1.25em .625em}
.imageblock>.title{margin-bottom:0}
.imageblock.thumb,.imageblock.th{border-width:6px}
.imageblock.thumb>.title,.imageblock.th>.title{padding:0 .125em}
.image.left,.image.right{margin-top:.25em;margin-bottom:.25em;display:inline-block;line-height:0}
.image.left{margin-right:.625em}
.image.right{margin-left:.625em}
a.image{text-decoration:none;display:inline-block}
a.image object{pointer-events:none}
sup.footnote,sup.footnoteref{font-size:.875em;position:static;vertical-align:super}
sup.footnote a,sup.footnoteref a{text-decoration:none}
sup.footnote a:active,sup.footnoteref a:active,#footnotes .footnote a:first-of-type:active{text-decoration:underline}
#footnotes{padding-top:.75em;padding-bottom:.75em;margin-bottom:.625em}
#footnotes hr{width:20%;min-width:6.25em;margin:-.25em 0 .75em;border-width:1px 0 0}
#footnotes .footnote{padding:0 .375em 0 .225em;line-height:1.3334;font-size:.875em;margin-left:1.2em;margin-bottom:.2em}
#footnotes .footnote a:first-of-type{font-weight:bold;text-decoration:none;margin-left:-1.05em}
#footnotes .footnote:last-of-type{margin-bottom:0}
#content #footnotes{margin-top:-.625em;margin-bottom:0;padding:.75em 0}
div.unbreakable{page-break-inside:avoid}
.big{font-size:larger}
.small{font-size:smaller}
.underline{text-decoration:underline}
.overline{text-decoration:overline}
.line-through{text-decoration:line-through}
.aqua{color:#00bfbf}
.aqua-background{background:#00fafa}
.black{color:#000}
.black-background{background:#000}
.blue{color:#0000bf}
.blue-background{background:#0000fa}
.fuchsia{color:#bf00bf}
.fuchsia-background{background:#fa00fa}
.gray{color:#606060}
.gray-background{background:#7d7d7d}
.green{color:#006000}
.green-background{background:#007d00}
.lime{color:#00bf00}
.lime-background{background:#00fa00}
.maroon{color:#600000}
.maroon-background{background:#7d0000}
.navy{color:#000060}
.navy-background{background:#00007d}
.olive{color:#606000}
.olive-background{background:#7d7d00}
.purple{color:#600060}
.purple-background{background:#7d007d}
.red{color:#bf0000}
.red-background{background:#fa0000}
.silver{color:#909090}
.silver-background{background:#bcbcbc}
.teal{color:#006060}
.teal-background{background:#007d7d}
.white{color:#bfbfbf}
.white-background{background:#fafafa}
.yellow{color:#bfbf00}
.yellow-background{background:#fafa00}
span.icon>.fa{cursor:default}
a span.icon>.fa{cursor:inherit}
.admonitionblock td.icon [class^="fa icon-"]{font-size:2.5em;text-shadow:1px 1px 2px rgba(0,0,0,.5);cursor:default}
.admonitionblock td.icon .icon-note::before{content:"\f05a";color:#19407c}
.admonitionblock td.icon .icon-tip::before{content:"\f0eb";text-shadow:1px 1px 2px rgba(155,155,0,.8);color:#111}
.admonitionblock td.icon .icon-warning::before{content:"\f071";color:#bf6900}
.admonitionblock td.icon .icon-caution::before{content:"\f06d";color:#bf3400}
.admonitionblock td.icon .icon-important::before{content:"\f06a";color:#bf0000}
.conum[data-value]{display:inline-block;color:#fff!important;background:rgba(0,0,0,.8);border-radius:50%;text-align:center;font-size:.75em;width:1.67em;height:1.67em;line-height:1.67em;font-family:"Open Sans","DejaVu Sans",sans-serif;font-style:normal;font-weight:bold}
.conum[data-value] *{color:#fff!important}
.conum[data-value]+b{display:none}
.conum[data-value]::after{content:attr(data-value)}
pre .conum[data-value]{position:relative;top:-.125em}
b.conum *{color:inherit!important}
.conum:not([data-value]):empty{display:none}
dt,th.tableblock,td.content,div.footnote{text-rendering:optimizeLegibility}
h1,h2,p,td.content,span.alt,summary{letter-spacing:-.01em}
p strong,td.content strong,div.footnote strong{letter-spacing:-.005em}
p,blockquote,dt,td.content,td.hdlist1,span.alt,summary{font-size:1.0625rem}
p{margin-bottom:1.25rem}
.sidebarblock p,.sidebarblock dt,.sidebarblock td.content,p.tableblock{font-size:1em}
.exampleblock>.content{background:#fffef7;border-color:#e0e0dc;box-shadow:0 1px 4px #e0e0dc}
.print-only{display:none!important}
@page{margin:1.25cm .75cm}
@media print{*{box-shadow:none!important;text-shadow:none!important}
html{font-size:80%}
a{color:inherit!important;text-decoration:underline!important}
a.bare,a[href^="#"],a[href^="mailto:"]{text-decoration:none!important}
a[href^="http:"]:not(.bare)::after,a[href^="https:"]:not(.bare)::after{content:"(" attr(href) ")";display:inline-block;font-size:.875em;padding-left:.25em}
abbr[title]{border-bottom:1px dotted}
abbr[title]::after{content:" (" attr(title) ")"}
pre,blockquote,tr,img,object,svg{page-break-inside:avoid}
thead{display:table-header-group}
svg{max-width:100%}
p,blockquote,dt,td.content{font-size:1em;orphans:3;widows:3}
h2,h3,#toctitle,.sidebarblock>.content>.title{page-break-after:avoid}
#header,#content,#footnotes,#footer{max-width:none}
#toc,.sidebarblock,.exampleblock>.content{background:none!important}
#toc{border-bottom:1px solid #dddddf!important;padding-bottom:0!important}
body.book #header{text-align:center}
body.book #header>h1:first-child{border:0!important;margin:2.5em 0 1em}
body.book #header .details{border:0!important;display:block;padding:0!important}
body.book #header .details span:first-child{margin-left:0!important}
body.book #header .details br{display:block}
body.book #header .details br+span::before{content:none!important}
body.book #toc{border:0!important;text-align:left!important;padding:0!important;margin:0!important}
body.book #toc,body.book #preamble,body.book h1.sect0,body.book .sect1>h2{page-break-before:always}
.listingblock code[data-lang]::before{display:block}
#footer{padding:0 .9375em}
.hide-on-print{display:none!important}
.print-only{display:block!important}
.hide-for-print{display:none!important}
.show-for-print{display:inherit!important}}
@media amzn-kf8,print{#header>h1:first-child{margin-top:1.25rem}
.sect1{padding:0!important}
.sect1+.sect1{border:0}
#footer{background:none}
#footer-text{color:rgba(0,0,0,.6);font-size:.9em}}
@media amzn-kf8{#header,#content,#footnotes,#footer{padding:0}}
</style>
</head>
<body class="article">
<div id="header">
<h1>Chapter 4: GUIX Studio Resources</h1>
</div>
<div id="content">
<div id="preamble">
<div class="sectionbody">
<div class="paragraph">
<p>GUIX Studio provides management of all UI resources the application will use for colors, fonts, pixel-maps, and strings. The sections that follow describe how to add, modify, and delete resources within your UI screen design.</p>
</div>
<div class="paragraph">
<p>All resource management is done within the <strong><em>Resource View</em></strong> of the GUIX Studio UI, as shown below in <strong><em>Figure 8</em></strong>.</p>
</div>
<div class="imageblock">
<div class="content">
<img src="./media/guix-studio/image38.jpg" alt="Screenshot of the GUIX Studio Resource View.">
</div>
</div>
<div class="paragraph">
<p><strong>Figure 8</strong></p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_color_resources">Color Resources</h2>
<div class="sectionbody">
<div class="paragraph">
<p>The <strong><em>Colors</em></strong> section of the <strong><em>Resource View</em></strong> allows you to manage your color resources. You can expand this view by clicking on the <strong>+</strong> field in the view header, resulting in the view shown below in <strong><em>Figure 9</em></strong>:</p>
</div>
<div class="imageblock">
<div class="content">
<img src="./media/guix-studio/resource_view_color_section.png" alt="Screenshot of the Colors section of the Resource View">
</div>
</div>
<div class="paragraph">
<p><strong>Figure 9</strong></p>
</div>
<div class="paragraph">
<p>Color resources consist of one or more colors, each with a unique logical name. For example, in <strong>Figure 9</strong> the logical name <strong>CANVAS,</strong> which is the system color ID for the screen background fill color, is associated with the physical color black. This color resource is used whenever the application specifies <strong>GX_COLOR_ID_CANVAS</strong> as the color in the object properties.</p>
</div>
<div class="paragraph">
<p>The color "swatch" indicating the color RGB value is shown on the left, followed by the color ID name. You can change the RGB value associated with any ID name at any time. You cannot change the pre-defined system color ID names because these are used internally by the GUIX library. You can however change any of the color values. Changing a system color value is a <strong>global change</strong>. This means that any widget that does not have a specific color assignment will take on the new system color value.</p>
</div>
<div class="paragraph">
<p>You can change both the color name and color value for custom colors that you have added to the Theme.</p>
</div>
<div class="paragraph">
<p>To modify a color resource, double-click (or right-click and menu select) on the color resource. This action brings up the color-definition dialog. From this dialog, the color resource can be modified to match the application&#8217;s UI needs. <strong><em>Figure 10</em></strong> shows the modification dialog when <strong>CANVAS</strong> is double-clicked. The appearance of this dialog will change based on the color-format settings of the target display.</p>
</div>
<div class="imageblock">
<div class="content">
<img src="./media/guix-studio/edit_color.png" alt="Screenshot of the Edit Color dialog.">
</div>
</div>
<div class="paragraph">
<p><strong>Figure 10</strong></p>
</div>
<div class="paragraph">
<p>The appearance of the Edit Color dialog will change depending on the color depth and color format configuration of the current display.</p>
</div>
<div class="paragraph">
<p>To add a new color resource, from the <strong><em>Colors</em></strong> section of the <strong><em>Resource View</em></strong> select the following button:</p>
</div>
<div class="imageblock">
<div class="content">
<img src="./media/guix-studio/resource_view_add_new_color.jpg" alt="Add New Color button">
</div>
</div>
<div class="paragraph">
<p>Use the resulting color dialog to add a new color resource, as shown below in <em>*Figure 11*:</em></p>
</div>
<div class="imageblock">
<div class="content">
<img src="./media/guix-studio/new_color.png" alt="Screenshot of the New Color in the Edit Color dialog.">
</div>
</div>
<div class="paragraph">
<p><strong>Figure 11</strong></p>
</div>
<div class="paragraph">
<p>After completing these steps, selecting <strong>Save</strong> a new color resource with the name <strong>NEW_COLOR</strong> with the physical color green will be available for the application to use.</p>
</div>
<div class="paragraph">
<p><strong>Special considerations when changing display color format settings:</strong></p>
</div>
<div class="paragraph">
<p>When you create a new project, you are automatically prompted to configure the project&#8217;s displays and the color format of each display. Most often you will make these selections one time and you would not need to modify those configuration settings.</p>
</div>
<div class="paragraph">
<p>You may determine that it is necessary to change your display color format settings at a later time. In that case, GUIX Studio will make a best fit conversion of your current system and user color RGB values from the old color format to the new color format. This conversion follows a few logical rules.</p>
</div>
<div class="paragraph">
<p>For user-defined colors, GUIX Studio always attempts to convert the previous color to the closest matching color in the new color format. If you are converting from a high color depth such as 16 bpp 5:6:5 color format to a gray scale or monochrome color format, this change may result in undesired color conversions. When making a large change in the display color depth settings, some manual updates to the new user-defined color table may be required.</p>
</div>
<div class="paragraph">
<p>For the pre-defined system colors, GUIX Studio internally defines three unique default color tables. One default color table is used for all color depths greater than 4-bpp gray scale, a second default color table is used for gray scale color formats (1 bpp &lt; display_color_format &lt;= 4bpp) and finally a third default system color table is used for monochrome color format.</p>
</div>
<div class="paragraph">
<p>When you switch the display color format using Project Configuration dialog, the following rules are applied:</p>
</div>
<div class="paragraph">
<p>1) If the old and new display color formats use different default system color tables as defined above, the system colors are each reset to the pre-defined default colors. In other words, if you switch from color to gray scale, or from gray scale to monochrome color depth, your system colors will be reset to the internally defined default values for the new color depth. While this may cause the loss of some customized color information, this solution gives you a reasonable starting point when you make a dramatic change to your display color format settings.</p>
</div>
<div class="paragraph">
<p>2) If the old and new color formats use the same default color table, meaning you are making a less dramatic color format change, GUIX Studio will test each system color to determine if you have modified the system color RGB value from its default value. If the system color RGB value has been modified, GUIX Studio will do a best-match conversion from the old color format to the new color format. If the system color has not been modified, it will be reset to the default color for the new color format.</p>
</div>
<div class="paragraph">
<p><strong>Special considerations for palette mode operation:</strong></p>
</div>
<table class="tableblock frame-all grid-all stretch">
<colgroup>
<col style="width: 50%;">
<col style="width: 50%;">
</colgroup>
<tbody>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">When a project is configured for 256 color palette mode color format, the user can configure how the palette to be installed and used is defined. You can access and edit the palette definition by the using the Configure</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Themes dialog, and if your project is set for 8 bpp you should see the "Edit Palette" button. Click this button to bring up the Edit Palette dialog:</p></td>
</tr>
</tbody>
</table>
<div class="imageblock">
<div class="content">
<img src="./media/guix-studio/edit_palette.png" alt="Screenshot of the Edit Palette dialog.">
</div>
</div>
<div class="paragraph">
<p>GUIX Studio divides the palette into two sections: The "user defined" section and the "auto-generated" section. GUIX Studio runs a sophisticated optimal palette generation algorithm to create the best palette for displaying the images that are included in each theme. You can carve out any number of palette entries you need to define by typing a number into the "Predefined Palette Entries" field, and enter any RGB value you like for any of these slots. The remaining slots will be allocated to Studio to create an optimal color palette for displaying your images.</p>
</div>
<div class="paragraph">
<p>When running in this mode, if you want to edit a color defined in the resource view, the color editor will allow you to select only from the predefined palette entries that you have defined. This is because the remaining palette entries are auto-generated by GUIX Studio and will change as the images added to your project are modified.</p>
</div>
<div class="paragraph">
<p>If you require the display of anti-aliased fonts when running in 8bpp palette mode, you must define an array of palette entries that create a gradient for each foreground/background color use to display your anti-aliased text. You can use either 8 palette entries for the gradient for each color combination, or 16 palette entries for a smoother gradient. This number of palette entries used is determined by the "Number of Palette Mode Anti-Aliased Text Colors" checkbox on the Project Configuration dialog. You can use a gradient with only eight entries to minimize the palette entries used for each color combination, or use 16 entry gradients to provide the smoothest anti-aliased text appearance.</p>
</div>
<div class="paragraph">
<p>To simplify defining a color gradient for displaying anti-aliased text, or to generate a color gradient for your own usage, the Edit Palette dialog provides a Generate Gradient button. To use this feature, you should first assign the r:g:b values of the starting and ending gradient colors.</p>
</div>
<div class="paragraph">
<p>For example, if you wanted to display anti-aliased red text on a medium gray background using eight palette entries starting at index 50, you would assign the r:g:b value of 255:0:0 to palette index 50, and the r:g:b value 128:128:128 to palette index 57. Enter these palette index values into the start-index and end-index fields on this dialog, and click the Generate Gradient button. The palette entries 51 through 56 will be initialized to define a smooth gradient transition between your bounding colors.</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_font_resources">Font Resources</h2>
<div class="sectionbody">
<div class="paragraph">
<p>In order to manage font resources the <strong><em>Fonts</em></strong> section of the <strong><em>Resource View</em></strong> must first be expanded by clicking on the <strong>+</strong> field, resulting in the dialog shown below in <strong><em>Figure 12</em></strong>:</p>
</div>
<div class="imageblock">
<div class="content">
<img src="./media/guix-studio/resource_view_font_section.png" alt="Screenshot of the Fonts section in the Resource View.">
</div>
</div>
<div class="paragraph">
<p><strong>Figure 12</strong></p>
</div>
<div class="paragraph">
<p>Font resources consist of one or more fonts, each with a unique logical name. For example, in <strong>Figure 12</strong> the logical name <strong>SYSTEM</strong> is associated with a specific font. This font resource is used whenever the application specifies <strong>SYSTEM</strong> as the font in the object properties. The font group shows you a WYSIWYG preview of the font glyphs on the left, the font height in pixels, the Font ID name and the font size (in kb).</p>
</div>
<div class="paragraph">
<p>In the view above, the first four fonts are the pre-defined default fonts that are required by the GUIX library. You can change the font data associated with these fonts, however you cannot change these font ID names.</p>
</div>
<div class="paragraph">
<p>The following four fonts, named "LARGE", "MEDIUM", "NORMAL" and "SMALL", are custom fonts that have been added to the project by the user.</p>
</div>
<div class="paragraph">
<p>To modify a font resource, double-click (or right-click and menu select) on the font resource. From this dialog the font resource can be modified to match the application&#8217;s UI needs. <strong><em>Figure 13</em></strong> shows the modification dialog when <strong>SYSTEM</strong> is double-clicked.</p>
</div>
<div class="imageblock">
<div class="content">
<img src="./media/guix-studio/edit_system_font.png" alt="Screenshot of the modification dialog when SYSTEM is double-clicked.">
</div>
</div>
<div class="paragraph">
<p><strong>Figure 13</strong></p>
</div>
<div class="paragraph">
<p>To add a new font resource, from the <strong><em>Fonts</em></strong> section of the <strong><em>Resource View</em></strong> select the following button:</p>
</div>
<div class="imageblock">
<div class="content">
<img src="./media/guix-studio/resource_view_add_new_font.jpg" alt="Add New Font button">
</div>
</div>
<div class="paragraph">
<p>This will invoke the <code>Font Edit</code> dialog to add a new font resource, as shown below in <strong><em>Figure 14</em></strong>:</p>
</div>
<div class="imageblock">
<div class="content">
<img src="./media/guix-studio/add_new_font.png" alt="Screenshot of the modification dialog to add a new font resource.">
</div>
</div>
<div class="paragraph">
<p><strong>Figure 14</strong></p>
</div>
<div class="paragraph">
<p>New GUIX fonts are created by GUIX Studio rendering a chosen TrueType font at a particular size. Therefore the dialog above first requires a TrueType font path. You can use the browse button to browse to a directory containing font files on your development system. Several TrueType fonts are also included in the GUIX/fonts sub-folder wherever you have installed GUIX Studio.</p>
</div>
<div class="paragraph">
<p>If possible the location of the TrueType font file is stored internally using a project-relative path. For this reason it is important to keep all of your font files in a common location and use a common directory tree structure for your projects and font files in order to enable you to move GUIX Studio projects from one development station to another.</p>
</div>
<div class="paragraph">
<p>The Font Name field allows you to specify the font resource ID name. This is the resource ID that will be used in the code generated by GUIX Studio and also used by your application when referencing the font. This name must follow C variable naming syntax requirements.</p>
</div>
<div class="paragraph">
<p>Once you have chosen a TrueType font file to use as input, enter a font logical name.</p>
</div>
<div class="paragraph">
<p>The <code>Specify Output File</code> checkbox allows you to specify a unique output file for each font. If this checkbox is not selected, the font data is written to the default resource file for this display. If the checkbox is selected, you can type a specific filename into which the data for this font will be written. The purpose for this option is to allow you to divide your font data, which can be very large C arrays, into multiple output files. Certain compilers struggle to handle C files that are hundreds of thousands of source lines. The <code>Standalone Binary</code> allows you to store font data in a binary file. Later, you can load this binary file into RAM and utilize the GUIX API <strong>gx_binres_font_load</strong> to load the font resource from the RAM buffer. This capability is especially helpful when you need to place specific font resources in external memory and load them dynamically during runtime.</p>
</div>
<div class="paragraph">
<p>The checkbox <code>Generate Kerning Info </code>instructs GUIX Studio to include kerning information within the generated font, which is used to adjust the relative positions of successive glyphs in a string. If you want to apply kerning with your strings, you will need to use a font that contains kerning information and turn on this checkbox. You will also need to define the GUIX library build option "GX_FONT_KERNING_SUPPORT" to support rendering text with kerning information.</p>
</div>
<div class="paragraph">
<p>The checkbox <code>Include character set defined by String Table</code> instructs GUIX Studio to include those glyphs referenced by your static string table within the generated font. You can include additional glyphs by selecting and editing the character ranges listed below, but this option can be selected to quickly generate the minimum character set needed to display the strings defined within your string table. Of course, if your string table uses glyphs which are not present in your TrueType source font, those characters will not be available in your GUIX font, and will not be displayed on your target system.</p>
</div>
<div class="paragraph">
<p>To generate a more complete font, or a font that includes characters that may not be used within your statically defined string table, you can also select character ranges from the list below. Note that you can select any number of character ranges, and you can edit the actual starting and ending character code to be included within each selected range.</p>
</div>
<div class="paragraph">
<p>The pre-defined character ranges and page names are only suggestions allowing you to easily select the character set needed for the active languages in use today. The listed language names do not have any effect on the generated GUIX font, and you are free to type in any Hex character range you like for any enabled or selected character range.</p>
</div>
<div class="paragraph">
<p>For example, if you would like to generate a font which contains only the numeric characters, you might select the "Ascii" code page, but enter the starting value 0030 and the ending value 0039 to generate a font containing only the numeric characters. Note that the character range values encoded in Hexadecimal, which is the normal notation for Unicode character tables.</p>
</div>
<div class="paragraph">
<p>By default, GUIX Studio and the GUIX library support character codes 0x0000 through 0xffff, which encompasses all active languages, mathematical forms, and other symbols in use today. If you require the use of character codes above the value 0xffff, including certain Private Use Areas, you will need to turn on the checkbox "Support Extended Character Range". When this checkbox is selected, GUIX Studio allows the user to specify character ranges from 0x0000 through 0x10ffff, which includes the Unicode Private Use character ranges. If you require this extended character range, you will also need to define the GUIX library build option "GX_EXTENDED_UNICODE_SUPPORT" so that the GUIX library will internally support 32-bit character codes, rather than the default configuration which supports 16 bit character codes.</p>
</div>
<div class="paragraph">
<p>If you select both the "Include character set defined by String Table" checkbox and one or more of the character ranges in the list below, GUIX Studio will combine these selections into the superset of both the ranges selected and those characters used within your string table. Of course the selected TrueType source font must also contain the needed characters in order for GUIX Studio to produce meaningful glyphs for each requested character value.</p>
</div>
<div class="paragraph">
<p>Once the character range is determined, specify the font height in pixels and the font format. Both anti-aliased and binary fonts are supported. Binary fonts require less static data storage area, however anti-aliased fonts produce the best appearance on targets running at 4-bpp grayscale or higher color depths.</p>
</div>
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<div class="title">Note</div>
</td>
<td class="content">
<em>The "font height" refers to the font&#8217;s EM Square. In traditional metal type, the EM Square was equal to the line height of the metal body from which each letter rises, and each metal body was of the same size. In metal type, the physical size of a letter could not normally exceed the EM Square. In digital type, the EM is a grid of arbitrary resolution that is used as the design space of a digital font. For these digital fonts it&#8217;s common that some glyph features, such as accents and descents, may extend beyond the limits of the EM square. The end result is that the widget height needed to fully display a particular font will often need to be slightly larger then the requested font pixel height.</em>
</td>
</tr>
</table>
</div>
<div class="paragraph">
<p>Once all of the font configuration fields are completed, click on the OK button to create a new font resource. GUIX Studio will generate a GUIX compatible font with the chosen properties, add that font to the project resources, and make the font available for the application to use.</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_pixel_map_resources">Pixel-map Resources</h2>
<div class="sectionbody">
<div class="paragraph">
<p>In order to manage pixel-map resources the <strong><em>Pixel-maps</em></strong> section of the <strong><em>Resource View</em></strong> must first be expanded by clicking on the <strong>+</strong> field, resulting in the dialog shown below in <strong><em>Figure 15</em></strong>:</p>
</div>
<div class="paragraph">
<p>When the <code>Pixelmap</code> group is expanded, you should see a preview similar to this:</p>
</div>
<div class="imageblock">
<div class="content">
<img src="./media/guix-studio/pixelmap_view.png" alt="Screenshot of the Pixel-maps section in the Resource View.">
</div>
</div>
<div class="paragraph">
<p><strong>Figure 15</strong></p>
</div>
<div class="paragraph">
<p>Pixel-map resources consist of one or more pixel-maps, each with a preview of the pixel-map image on the left, the pixel-map dimensions in pixels, a unique logical name and the pixel-map storage size in the output resource file (in kb).</p>
</div>
<div class="paragraph">
<p>The first group of pixel-maps comprises the pre-defined system pixel-maps required by GUIX widgets such as radio buttons and checkboxes. You can change the pixel-map data associated with the system pixel-maps, however you cannot change these pixel-map ID names. Also shown above are several custom pixel-maps with names like "BACKGROUND" and "BUTTON_ACTIVE". These are examples of pixel-maps a user has added to the project that might be used to render a GX_PIXELMAP_BUTTON widget.</p>
</div>
<div class="paragraph">
<p>Since many projects contain a large number of pixel-maps, the pixel-map view allows you to define any number of pixel-map folders to organize your pixel-map images.</p>
</div>
<div class="paragraph">
<p>Adding a new pixel-map folder is done by right-clicking on <code>Pixelmaps</code> section header of the <strong><em>Resource View</em></strong> selecting "Add Folder".</p>
</div>
<div class="paragraph">
<p>To modify a pixel-map resource, double-click (or right-click and menu select) on the pixel-map resource. From this dialog the pixel-map resource can be modified to match the application&#8217;s UI needs. <strong><em>Figure 16</em></strong> shows the modification dialog when <strong>RADIO_ON</strong> is double-clicked.</p>
</div>
<div class="imageblock">
<div class="content">
<img src="./media/guix-studio/edit_pixelmap.png" alt="Screenshot of the Edit Pixel-maps dialog.">
</div>
</div>
<div class="paragraph">
<p><strong>Figure 16</strong></p>
</div>
<div class="paragraph">
<p>The <code>Edit Pixelmap</code> dialog allows you to define a new pixel-map or modify the content of an existing pixel-map. Behind the scenes, GUIX Studio reads the input image and converts the image to the <code>GUIX GX_PIXELMAP</code> format that can be used by the GUIX library. GUIX Studio also converts the color space of the incoming image to the color space of the display on which this pixel-map will be used.</p>
</div>
<div class="paragraph">
<p>The first field of this dialog is the path to the source image. GUIX Studio supports the input of PNG (.png) or JPEG (.jpg) format image files. You can use the "browse" button to find the desired input file on your local file system.</p>
</div>
<div class="paragraph">
<p>If possible the location of the input image file is stored internally using a project-relative path. For this reason it is important to keep all of your image files in a common location and use a common directory tree structure for your projects and image files in order to enable you to move GUIX Studio projects from one development station to another and not lose track of input image data.</p>
</div>
<div class="paragraph">
<p>The <code>Pixelmap ID</code> fields allow you to specify the logical name of the pixel-map resource. This name typed here must be unique and must follow C variable naming syntax rules.</p>
</div>
<div class="paragraph">
<p>The <code>Specify Output File</code> checkbox allows you to specify a unique output file for each pixel-map. If this checkbox is not selected, the pixel-map data is written to the default resource file for this display. If the checkbox is selected, you can type a specific filename into which the data for this pixel-map will be written. The purpose for this option is to allow you to divide your pixel-map data, which can be very large C arrays, into multiple output files. Certain compilers struggle to handle C files that are hundreds of thousands of source lines. The <code>Standalone Binary</code> allows you to store pixelmap data in a binary file. Later, you can load this binary file into RAM and utilize the GUIX API <strong>gx_binres_pixelmap_load</strong> to load the pixelmap resource from the RAM buffer. This capability is especially helpful when you need to place specific font resources in external memory and load them dynamically during runtime.</p>
</div>
<div class="paragraph">
<p>The <code>Compress Output</code> checkbox allows you to specify if the pixel-map output is uses a proprietary GUIX compression algorithm. Compressed output files are generally smaller, but they also require processor time to render on the target. Most often you will choose compression for your large pixel-maps, and use non-compressed format for your smaller pixel-maps.</p>
</div>
<div class="paragraph">
<p>The <code>Include Alpha Channel</code> checkbox determines how GUIX Studio utilizes alpha channel information sometimes present in .png format input files. If this checkbox is checked and the display is running at 16-bpp color depth or higher, GUIX Studio will preserve the full incoming alpha data in the output file. If this checkbox is not checked, GUIX will produce a slightly smaller output file. This output file may include transparency, but it will not include full alpha-blending information.</p>
</div>
<div class="paragraph">
<p>The <code>Dither</code> checkbox instructs GUIX Studio to apply an advanced dithering algorithm when converting the input image for use with a lower color depth display. Dithering is usually enabled, but can cause larger output files if compression is used because there will be fewer repeating pixels.</p>
</div>
<div class="paragraph">
<p>Once all options are set as desired, click the OK button to produce a new pixel-map resource. GUIX Studio will read the input image file, decompress it, perform color space conversion and dithering, optionally re-compress the data, and save the data in GUIX compatible <code>GX_PIXELMAP</code> format. The new pixel-map is added to the project resources and made available for the application to use.</p>
</div>
<div class="paragraph">
<p>To add a new pixel-map resource, from within the <code>Pixelmaps</code> section of the <strong><em>Resource View</em></strong> select the following button:</p>
</div>
<div class="imageblock">
<div class="content">
<img src="./media/guix-studio/resource_view_add_new_pixelmap.jpg" alt="Add New Pixel-map button.">
</div>
</div>
<div class="paragraph">
<p><strong>Batch Pixelmap Edit</strong></p>
</div>
<div class="paragraph">
<p>To modify the properties of a bunch of pixelmaps, right click on pixelmap group or folder, and select <strong>Edit Pixelmap(s)</strong> menu to invoke <strong>Edit Pixelmap(s)</strong> dialog.</p>
</div>
<div class="imageblock">
<div class="content">
<img src="./media/guix-studio/batch_pixelmap_edit.jpg" alt="Screenshot of the Edit Multi Pixel-maps dialog.">
</div>
</div>
<div class="paragraph">
<p>Checkbox status description:</p>
</div>
<div class="paragraph">
<p><span class="image"><img src="./media/guix-studio/checkbox_checked.png" alt="Checked button."></span>
This status means all pixelmaps have the property checked, you can uncheck the button to change the property for all the pixelmaps.</p>
</div>
<div class="paragraph">
<p><span class="image"><img src="./media/guix-studio/checkbox_unchecked.png" alt="Unchecked button."></span>
This status means all pixelmaps have the property unchecked, you can check the button to change the property for all the pixelmaps.</p>
</div>
<div class="paragraph">
<p><span class="image"><img src="./media/guix-studio/checkbox_undetermined.png" alt="Undetermined button."></span>
This status means pixelmaps have a different status for the property, you can check or uncheck the button to change the property for all the pixelmaps, otherwise, the property remains unchanged.</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_string_resources">String Resources</h2>
<div class="sectionbody">
<div class="paragraph">
<p>When the Strings group is expanded you should see a preview of the project string table, as shown below:</p>
</div>
<div class="imageblock">
<div class="content">
<img src="./media/guix-studio/string_res_view.png" alt="Screenshot of the expanded Strings group.">
</div>
</div>
<div class="paragraph">
<p><strong>Figure 17</strong></p>
</div>
<div class="paragraph">
<p>String resources consist of one or more strings, each with a unique logical name. For example, in <strong>Figure 17</strong> the logical name "PATIENT_LIST" is associated with the string "Patient List" shown on its right. This string resource is used whenever the application specifies PATIENT_LIST as the string in the object properties.</p>
</div>
<div class="paragraph">
<p>Always remember that your ID names for all resource types must be C syntax compatible variable names. These names will be used extensively when your project resource files and specifications files are produced by Studio.</p>
</div>
<div class="paragraph">
<p>To modify a string resource, double-click (or right-click and menu select) on the string resource to invoke the <strong><em>String Table Editor</em></strong> dialog. From the <strong><em>String Table Editor</em></strong> dialog the string resource can be modified to match the application&#8217;s UI needs. <strong><em>Figure 18</em></strong> shows the modification dialog when <strong>STRING_13</strong> is double-clicked.</p>
</div>
<div class="paragraph">
<p>In this case, the string ID name is shown on the left, which the string content for the first or reference language is shown on the right. Of course the exact string content is very specific to your application, however the layout of the String group preview is consistent.</p>
</div>
<div class="paragraph">
<p>GUIX Studio supports static text and multi-lingual application by defining and maintaining a String Table. The String Table defines one string ID for each record, and one string constant for each record for each supported language.</p>
</div>
<div class="paragraph">
<p>The languages to be supported by your application are defined by using the Language Configuration Dialog, show here:</p>
</div>
<div class="imageblock">
<div class="content">
<img src="./media/guix-studio/config_languages.png" alt="Screenshot of the Language Configuration dialog.">
</div>
</div>
<div class="paragraph">
<p><strong>Figure 18</strong></p>
</div>
<table class="tableblock frame-all grid-all stretch">
<colgroup>
<col style="width: 50%;">
<col style="width: 50%;">
</colgroup>
<tbody>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">The Language Configuration Dialog is invoked by using the Configure</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Languages command on the application menu. This dialog allows you to define the number of languages to be supported by your application and the name or language ID to be associated with each language. The languages supported can be modified after your project has been created, however if a language is removed you should be aware that the string data associated with that language is also removed and cannot be retrieved.</p></td>
</tr>
</tbody>
</table>
<div class="paragraph">
<p>The checkbox "<strong>Statically Defined</strong>" indicates the selected language will be statically defined in source code format in the generated resource file. If no languages are statically defined, the language table pointer will be set to NULL in the generated display table and a language must be loaded and installed by the application using the binary resource loader APIs provided by the GUIX library.</p>
</div>
<div class="paragraph">
<p>The checkbox "<strong>Support Bidi Text</strong>" instructs GUIX Studio to enable bidirectional text rendering support. You should turn on this checkbox if the strings you will be entering for this language require bi-directional text rendering.</p>
</div>
<div class="paragraph">
<p>The checkbox "<strong>Generate Bidi Text in Display Order</strong>" instructs GUIX Studio to generate bidirectional text to the output file in its display order. If this option is selected, no runtime processing is required within the GUIX library to properly render bidirectional text. When this option is selected, bidirectional text rendering should NOT be enabled within the GUIX library. This configuration yields the best runtime performance, but does not support rendering of dynamically defined bidirectional text strings.</p>
</div>
<div class="paragraph">
<p>The first language or "Index 1" language is referred to as your "reference language". This is the language that GUIX Studio will use when you are defining and editing your UI design. All other languages in your string table are referred to as Translation Languages. GUIX Studio supports exporting and importing the string table data in industry standard XLIFF or CSV format data files, convenient for exchanging string information with translators who might assist the application developer with adding translations for the languages to be supported other than the reference language. When you export the GUIX string table to an XLIFF or CSV file, the reference language along with one translation language are included in the XLIFF or CSV string data exchange file. Similarly, when you import an XLIFF or CSV file, the imported data is used to populate one translation language in your GUIX String table.</p>
</div>
<div class="imageblock">
<div class="content">
<img src="./media/guix-studio/string_table_editor.jpg" alt="Screenshot of the String table Editor.">
</div>
</div>
<div class="paragraph">
<p><strong>Figure 19</strong></p>
</div>
<div class="paragraph">
<p>The String Table Editor dialog first displays a list of string IDs on the left, followed by the reference language string data. If more than one language is defined, a third column shows any one of the supported translation languages. You can open and close the third column by clicking on the small arrow at the top-right of the reference language column.</p>
</div>
<div class="paragraph">
<p>When the translation language column is visible, you can cycle through the translation languages contained in the project by clicking on the small arrows at the top-right of the translation language column of the string list.</p>
</div>
<div class="paragraph">
<p>You can edit a string record by clicking on the record in the table to select it. When a record is selected, the record String ID and string content are shown in the fields below the table view. You can type new values into these fields to modify the string ID and string content.</p>
</div>
<div class="paragraph">
<p>The box in the right side of the table view shows previews of widgets that reference the selected string. This is useful to tell if an edited string will exceed a specific widget area.</p>
</div>
<div class="paragraph">
<p>The fields to the right of the string content include:</p>
</div>
<div class="ulist">
<ul>
<li>
<p>"Number of references": This field indicates how often a particular string ID is used within the GUIX Studio project. If the reference count is 0, this string may be obsolete and may optionally be removed by the user.</p>
</li>
<li>
<p>String Width (pixels) indicates the display width of the string using the indicated font.</p>
</li>
<li>
<p>The "Notes" field is an optional comment field that allows you to add information about the purpose or use of each string. These notes are included in any exported XLIFF string data files to aid translators in making accurate and meaningful string translations.</p>
</li>
</ul>
</div>
<div class="paragraph">
<p>Anytime you have the <strong><em>String Table Editor</em></strong> dialog open you can add additional strings to your project by clicking on the Add String button at the top of the dialog. Obsolete or unused strings can be removed from the project by first selecting the string, then clicking on the Delete String button at the top of the dialog.</p>
</div>
<div class="paragraph">
<p>In addition to manually adding new strings to your project using the String Table Editor dialog, you can also add new strings indirectly by simply typing string content in the "Text" field of the Properties View of any widget that supports text. In other words, when you are adding new widgets in the target view or typing text information in the properties view, these actions are automatically creating new entries in the project string table.</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_adding_language_translations">Adding Language Translations</h2>
<div class="sectionbody">
<div class="paragraph">
<p>The GUIX Studio string table editor supports a language definition workflow that allows the developer to create an application using his primary language, then export the string data to a standard schema XML or CSV file to be sent to a language translation expert. The translation file is then returned to the developer, who can import the language translations back into his Studio project, thereby adding support for a new language to his application.</p>
</div>
<div class="paragraph">
<p>This facility is invoked by using the Export (to write the string data to a file) and Import (to read the translated strings) buttons at the top of the String Table Editor. The Export button is used to create an XLIFF schema XML or CSV file which contains your reference language strings. This file can be utilized by a translator using tools and editors that support the standard XLIFF or CSV file format.</p>
</div>
<div class="paragraph">
<p>When a translation expert returns the XLIFF file to you with the new string translations, you can use the Import button to read the data from this XLIFF or CSV file. If the XLIFF or CSV file contains a new language, the new language is added to your project. If the XLIFF file contains new string data for an existing language, this new data is imported into your project. The reference language strings are not modified by the Import operation.</p>
</div>
<div class="paragraph">
<p>When you click the Export button, the XLIFF/CSV Export Control dialog, show below, is displayed:</p>
</div>
<div class="imageblock">
<div class="content">
<img src="./media/guix-studio/string_export.jpg" alt="Screenshot of the XLIFF/CSV Export Control dialog.">
</div>
</div>
<div class="paragraph">
<p><strong>Figure 20</strong></p>
</div>
<div class="paragraph">
<p>The Source Language and Target Language fields specify which string table columns will be written to the XLIFF or CSV file as the reference language and the translation language. The Source language is the reference strings, and the Target Language is the language for which your translator will provide translated string data.</p>
</div>
<div class="paragraph">
<p>The XLIFF version field specifies one of two main XLIFF file format versions, either version 1.2 or version 2.0 (and later). These XLIFF file format standards are incompatible, and you need to know which version your tools utilize before using the XLIFF Export/Import commands. More information about the XLIFF schema and XLIFF standards can be found here:</p>
</div>
<div class="ulist">
<ul>
<li>
<p>version 1.2: <a href="https://docs.oasis-open.org/xliff/xliff-core/xliff-core.html" class="bare">https://docs.oasis-open.org/xliff/xliff-core/xliff-core.html</a></p>
</li>
<li>
<p>version 2.0: <a href="https://docs.oasis-open.org/xliff/xliff-core/v2.0/os/xliff-core-v2.0-os.pdf">https://docs.oasis-open.org/xliff/xliff-core/v2.0/os/xliff-core-v2.0os.pdf</a></p>
</li>
</ul>
</div>
<div class="paragraph">
<p>The output filename and output path fields allow you to specify the filename and location to which the output file will be written. The filename is entirely up to the user, however we suggest that you use names that indicate the source and target languages contained within the exported file.</p>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="footer-text">
Last updated 2025-02-07 08:25:21 UTC
</div>
</div>
</body>
</html>